<template>
	<div class="wy-main message-receive">
		<a-row class="wy-main-title">
			<a-col :span="24">
				<p class="title-p">
					<a-divider class="title-vertical" type="vertical" />
					<span class="title-span">发消息</span>
					<a-divider class="title-divider" />
				</p>
			</a-col>
		</a-row>
		<a-row class="tips">
			<div>提醒：以下联系人都可设置为消息接收人，物流云不会将这些信息对外披露或向第三方提供。</div>
		</a-row>
		<a-form :form="form" @submit="handleSubmit" class="wy-form" style="margin-top: 20px;">
			<a-form-item :label-col="{ span: 4 }" :wrapper-col="{ span: 12 }" label="标题">
				<a-input v-decorator="[ 'fax']" />
			</a-form-item>
			<a-form-item :label-col="{ span: 4 }" :wrapper-col="{ span: 12 }" label="内容">
				<a-textarea :autosize="{ minRows: 4, maxRows: 6 }" v-decorator="[ 'Explain', { rules: [ {required: true, message: '内容说明不能为空！',}]}]" />
			</a-form-item>
			<a-form-item :label-col="{ span: 4 }" :wrapper-col="{ span: 12 }">
				<a slot="label" @click="showModal">选择对外消息接收人</a>
				<a-tag v-for="(itme,index) in Contactslist" key='index' closable @close="log">{{itme.name}}</a-tag>
			</a-form-item>
			<a-form-item :label-col="{ span: 4 }" :wrapper-col="{ span: 12 }" label="选择发布方式">
				<a-checkbox-group v-decorator="['checkbox-group']" style="width: 100%;">
					<a-checkbox value="A">
						站内信
					</a-checkbox>
					<a-checkbox value="B">
						邮箱
					</a-checkbox>
					<a-checkbox value="C">
						短信
					</a-checkbox>
				</a-checkbox-group>
			</a-form-item>
			<a-divider class="title-divider" />
			<div class="ant-row ant-form-item">
				<div class="ant-col-4 ant-form-item-label"></div>
				<div class="ant-col-10 ant-form-item-control-wrapper">
					<div class="ant-form-item-control">
						<span class="ant-form-item-children">
							<a-button type="primary" html-type="submit" style="width: 280px;height:50px;margin-top: -10px;">
								立即发布
							</a-button>
						</span>
					</div>
				</div>
			</div>
		</a-form>
		<a-modal title="消息接受人列表" v-model="visible" @ok="handleOk">
			<a-table :columns="columns" :dataSource="datas" :rowSelection="rowSelection">
			  </a-table>
		</a-modal>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				visible: false,
				columns:[{
				  title: '姓名',
				  dataIndex: 'name',
				  key: '1',
				},{
				  title: '手机号',
				  dataIndex: 'phone',
				  key: '2',
				},{
				  title: '公司名称',
				  dataIndex: 'companyname',
				  key: '3',
				},{
				  title: '备注',
				  dataIndex: 'remarks',
				  key: '4',
				},],
				datas:[{
					name:"张三",
					phone:'157*****112',
					companyname:'是快乐的继往开来',
					remarks:'akdn',
					key:'1'
				}],
				Contactslist:[],
				changelist:[],
			}
		},
		beforeCreate() {
			this.form = this.$form.createForm(this);
		},
		computed:{
			 rowSelection() {
			  const { selectedRowKeys } = this;
			  return {
				onChange: (selectedRowKeys, selectedRows) => {
				  console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
				  this.changelist = selectedRows
				},
			  }
			},
		},
		methods: {
			log(){
				console.log(this.Contactslist)
			},
			showModal() {
			  this.visible = true
			},
			handleOk(e) {
			  this.Contactslist = this.changelist
			  console.log(this.Contactslist)
			  this.visible = false
			},
			// 认证提交
			handleSubmit(e) {
				e.preventDefault();
				this.form.validateFieldsAndScroll((err, values) => {
					if (!err) {
						console.log('Received values of form: ', values);
					}
				});
			},
			// 检测确认密码
			handleConfirmBlur(e) {
				const value = e.target.value;
				this.confirmDirty = this.confirmDirty || !!value;
			},
			// 检测确认密码
			compareToFirstPassword(rule, value, callback) {
				const form = this.form;
				if (value && value !== form.getFieldValue('password')) {
					callback('您输入的两个密码不一致!');
				} else {
					callback();
				}
			},
			// 检测密码		
			validateToNextPassword(rule, value, callback) {
				const form = this.form;
				if (value && this.confirmDirty) {
					form.validateFields(['confirm'], {
						force: true
					});
				}
				callback();
			},
		}
	}
</script>

<style lang="less" scoped>
	.message-receive {
		.tips {
			border: 1px solid #E8E8E8;
			padding: 10px;
			margin-top: 10px;
		}
	}
</style>
